<script setup>
import { ArrowLeft } from '@icon-park/vue-next'

const props = defineProps({
    title: { type: Array, default: [] },//例:['文章', '编辑']
    path: { type: Array, default: [] },//例:['/article/list','/article/edit']
    back: { type: String, default: '' }//是否显示返回按钮
})
const router = useRouter()
</script>

<template>
    <div class="breadcrumb flex mb10">
        <el-space v-if="props.back != ''">
            <el-link :underline="false" @click="() => { router.push(props.back) }">
                <el-icon>
                    <ArrowLeft />
                </el-icon>
                <span class="ml5">返回</span>
            </el-link>
            <el-text class="el-breadcrumb__separator ml5 mr5" style="font-weight: 100;">|</el-text>
        </el-space>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <template v-for="(item, index) in props.title" :key="index">
                <el-breadcrumb-item v-if="props.path && props.path[index]" :to="{ path: props.path[index] }">{{ item
                }}</el-breadcrumb-item>
                <el-breadcrumb-item v-else>{{ item }}</el-breadcrumb-item>
            </template>
        </el-breadcrumb>
    </div>
</template>

<style scoped lang="scss">
.breadcrumb {
    height: 20px;
    line-height: 20px;
}
</style>
